<!--
 * @Author: wei_jt@ecidi.com
 * @Date: 2019-11-09 10:32:49
 * @LastEditors: wei_jt@ecidi.com
 * @LastEditTime: 2021-11-19 16:12:42
 * @Description: 应用配置
 -->
<template>
  <div class="body">
    <div class="title1">
      {{ LANG.OVERVIEW }}
    </div>
    <div style=" margin-bottom: 24px;font-size: 16px; color: #191919;">
      {{ LANG.SIGN_TIP }}
    </div>
    <div>
      <span
        class="title1"
        style="margin-right: 24px; margin-bottom: 24px;"
      >{{
        LANG.LIC_INFO
      }}</span>
      <fks-input
        v-model="licInfo"
        :class="{ english: english }"
        disabled
        :placeholder="LANG.UPLOAD_LIC_FILE"
        style="width: 416px; margin-bottom: 24px;"
      />
    </div>
    <div>
      <span
        v-if="licInfo"
        class="title1"
        style="margin-right: 24px; margin-bottom: 24px;"
      >{{ LANG.EXPIRATION }}</span>
      <fks-input
        v-if="licInfo"
        v-model="expiration"
        disabled
        style="width: 416px; margin-bottom: 24px;"
      />
    </div>
    <div class="title1">
      {{ LANG.UPLOAD_FILE }}
    </div>
    <fks-upload
      :action="uploadUrl"
      drag
      name="file"
      :headers="{
        'Fawkes-Auth': ACESS_TOKEN
      }"
      class="pdfSign"
      :with-credentials="true"
      :auto-upload="true"
      :limit="1"
      accept=".pdf"
      :file-list="fileList"
      :http-request="upload"
    >
      <i class="fks-icon-upload" />
      <div class="fks-upload__text">
        <span>{{ LANG.DRAG_CLICK }}</span>
        <br>
        <span>{{ LANG.SUPPORT_PDF }}</span>
      </div>
    </fks-upload>
    <div style="display: flex; margin-top: 24px; line-height: 36px;">
      <span
        style="margin-right: 24px; font-weight: bold; font-size: 16px;"
      >keySn</span>
      <fks-input
        v-model="keySn"
        style="width: 416px; margin-left: 22px;"
        :placeholder="LANG.KEYSN"
      />
    </div>
    <fks-button
      style="margin: 0 0 24px 88px;"
      @click="openDialog"
    >
      {{ LANG.UPLOAD_LIC }}
    </fks-button>
    <fks-button
      style="margin: 24px 0 0 24px;"
      @click="signPdf"
    >
      {{ LANG.PDF_SIGN }}
    </fks-button>
    <fks-button
      style="margin: 24px 0 0 24px;"
      @click="preview"
    >
      {{ LANG.PREVIEW }}
    </fks-button>
    <fks-dialog
      :visible.sync="uploadVisible"
      :append-to-body="true"
      width="800px"
      destroy-on-close
      :title="LANG.UPLOAD_LIC_FILE"
      class="uploadLic"
      @close="close"
    >
      <div>
        <fks-upload
          ref="upload"
          class="fks-upload"
          :action="uploadUrl"
          drag
          name="file"
          :headers="{
            'Fawkes-Auth': ACESS_TOKEN
          }"
          :with-credentials="true"
          :auto-upload="false"
          :limit="2"
          accept=".lic,.pfx"
          :file-list.sync="licFileList"
          :multiple="true"
        >
          <i class="fks-icon-upload" />
          <div class="fks-upload__text">
            <span>{{ LANG.UPLOAD_LIC_FILE_TIP }}</span>
            <br>
            <span>{{ LANG.SUPPORT_LIC_PFX }}</span>
          </div>
        </fks-upload>
      </div>
      <div
        slot="footer"
        style="text-align: right;"
      >
        <fks-button
          type="primary"
          icon="fks-icon-check"
          @click="licSubmit"
        >
          <span style="margin-left: 4px;">{{ LANG.SAVE }}</span>
        </fks-button>
      </div>
    </fks-dialog>
    <pdfSign
      ref="pdfSignature"
      :file-token.sync="fileToken"
      :key-sn="keySn"
    />
    <fks-dialog
      :visible="previewPdf"
      :append-to-body="true"
      @close="closePreview"
    >
      <div slot="title">
        {{ LANG.PREVIEW }}
      </div>
      <pre-view
        v-if="previewPdf"
        :file-token="fileToken"
        style="height: 800px;"
      />
    </fks-dialog>
  </div>
</template>

<script>
import pdfSign from '@/components/PdfSignature/index.vue'
import PreView from '@/components/PreView/index'
import { getLicense, updateLicense } from './api'
import { uploadFile } from '@/api/file'
export default {
  name: 'PdfSignature',
  components: { pdfSign, PreView },
  data() {
    return {
      uploadVisible: false,
      english: false,
      uploadUrl: '',
      ACESS_TOKEN: this.$storage.get('access_token'),
      fileList: [],
      licFileList: [],
      fileToken: '',
      keySn: 'chen_m2',
      sign: false,
      previewPdf: false,
      expiration: '',
      deleteFlag: false,
      licInfo: '',
      fileData: ''
    }
  },
  computed: {},
  watch: {
    $lang: {
      immediate: true,
      deep: true,
      handler(val) {
        if (val === 'en') {
          this.english = true
        } else {
          this.english = false
        }
      }
    }
  },
  created() {
    this.getLicense(0)
  },
  methods: {
    //增加flag判断是初始化调用获取签章数据还是上传签章后获取签章数据
    getLicense(flag) {
      getLicense().then((res) => {
        if (res.status) {
          this.licInfo = res.data.companyName
          this.expiration = res.data.expirationTime
          if (flag == 1) {
            this.$message.success(this.LANG.UPLOAD_LIC_SUCCESS)
          }
        } else {
          this.$message.error(res.message)
          this.licInfo = ''
          this.expiration = ''
        }
      })
    },
    openDialog() {
      this.uploadVisible = true
    },
    close() {
      this.uploadVisible = false
    },
    licSubmit() {
      let formData = new FormData()
      if (this.licFileList.length < 2) {
        this.$message.error(this.LANG.UPLOAD_LIC_FILE_TIP)
      } else {
        this.licFileList.forEach((file) => {
          let fileType = ''
          fileType = file.name.replace(/.+\./, '')
          switch (fileType) {
            case 'lic': {
              formData.append('licFile', file.raw)
              break
            }
            case 'pfx': {
              formData.append('pfxFile', file.raw)
              break
            }
            default:
              break
          }
        })
        updateLicense(formData).then((res) => {
          this.close()
          this.licFileList = []
          if (res.status) {
            this.getLicense(1)
          } else {
            this.getLicense(0)
          }
        })
      }
    },
    signPdf() {
      if (this.fileToken) {
        this.$refs.pdfSignature.downloadPdf(this.fileToken, this.keySn)
      } else {
        this.$message.error(this.LANG.UPLOAD_PDF_TIP)
      }
    },
    //上传文件
    upload(params) {
      // 根据后台需求数据格式
      let form = new FormData()
      // 文件对象
      form.append('file', params.file)
      uploadFile(form).then((res) => {
        if (res.status) {
          console.log(res.data.fileToken)
          this.$message.success(this.LANG.UPLOAD_SIGN_SUCCESS)
          this.fileToken = res.data.fileToken
        }
      })
    },
    preview() {
      if (this.fileToken) {
        this.previewPdf = true
      } else {
        this.$message.error(this.LANG.UPLOAD_PDF_TIP)
      }
    },
    closePreview() {
      this.previewPdf = false
    }
  }
}
</script>
<style scoped lang="scss">
.body {
  width: 100%;
  min-width: 720px;
  height: 100%;
  padding: 50px;
  overflow-y: auto;
  font-size: 14px;
  background-color: white !important;
}

.title1 {
  margin-bottom: 24px;
  font-weight: bold;
  font-size: 16px;
  color: #191919;
}

.pdfSign {
  ::v-deep .fks-upload-dragger {
    width: 416px;
    margin-left: 88px;
  }

  ::v-deep .fks-upload-list {
    margin-left: 88px;
  }
}

.fks-upload {
  ::v-deep .fks-upload-dragger {
    width: 736px;
  }
}

.english {
  ::v-deep .fks-input__inner {
    margin-left: 15px;
  }
}
</style>